<template>
    <div class="item">
        <span class="check">
            <input type="checkbox" v-model="item.isdone">
        </span>
        <span class="title" @dblclick="edit">
            <span v-if="isedit"><input type="text" v-model.trim="obj.title" @keyup.enter="submit" @keyup.esc="cancel"
                    @blur="cancel" v-focus></span>
            <span v-else>{{ item.title }}</span>
        </span>
        <span class="createtime">{{ dayjs(item.createtime).format('YYYY/MM/DD HH:mm:ss') }}</span>
        <span class="important">
            <a href="#" @click.prevent="item.important = false" v-if="item.important" style="color: #a53237;">紧急</a>
            <a href="#" @click.prevent="item.important = true" v-else style="color: #42b882;">常规</a>
            <!-- <a href="#" @click.prevent="changeImportant(item.id)" v-if="item.important" style="color: #a53237;">紧急</a>
            <a href="#" @click.prevent="changeImportant(item.id)" v-else style="color: #42b882;">常规</a> -->
        </span>
        <span class="operation">
            <span v-if="item.isdel === false">
                <a href="#" @click.prevent="del(item.id)">删除</a>
            </span>
            <span v-else>
                <a href="#" @click.prevent="restore(item.id)">还原</a>
                <a href="#" @click.prevent="realdel(item.id)" style="margin-left: 10px;">彻底删除</a>
            </span>
        </span>
    </div>
</template>

<script setup>
// 导入dayjs
import dayjs from 'dayjs';
// 接收List.vue传递过来的数据
let props = defineProps(['item'])
// 导入inject
import { inject } from 'vue'
// 接收app.vue传递过来的删除方法
const del = inject('del')
// 接收app.vue传递过来的还原方法
const restore = inject('restore')
// 接收app.vue传递过来的彻底删除方法
const realdel = inject('realdel')
// const changeImportant = inject('changeImportant')
/**
 * 编辑标题
 */
import { ref } from 'vue'
// 定义一个变量，结合v-if和v-else控制输入框和标题的显隐关系
let isedit = ref(false)
// 定义一个变量，将变量中的title属性和输入框双向绑定（做数据回填、获取用户输入的内容）
let obj = ref({
    id: props.item.id,
    title: ''
})
// 用户双击标题时调用该方法
const edit = () => {
    // 数据回填
    obj.value.title = props.item.title
    // 进入编辑模式（显示输入框）
    isedit.value = true
}
// 接收App.vue传递过来的修改标题的方法
const edittitle = inject('edittitle')
// 用户按回车时调用该方法，完成修改操作
const submit = () => {
    // 如果输入框不为空
    if (obj.value.title !== '') {
        // 调用App.vue传递过来的方法，实现修改操作
        edittitle(obj.value)
    }
    // 关闭输入框
    isedit.value = false
}
// 用户按esc或者输入框失去焦点时，调用该方法
const cancel = () => {
    isedit.value = false
}
// 输入框获取焦点、选中文本
const vFocus = {
    mounted: (el) => {
        el.focus()
        el.select()
    }
}
</script>

<style scoped>
.item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.check {
    flex: 5%;
}

.title {
    flex: 20%;
}

.title input {
    width: 100%;
    border: none;
    outline: none;
}

.createtime {
    flex: 35%;
}

.important {
    flex: 15%;
}

.operation {
    flex: 25%;
}
</style>